
// =======================轮播图大区======================
const slides = document.querySelectorAll(".slide");
const len = slides.length;
let currentIndex = 0,
    nextIndex = 1;
const paginations = document.querySelectorAll(".pagination i");
let timer;
slides[0].style.display = "block";
function play() {
    fadeOut(slides[currentIndex], 1000);
    fadeIn(slides[nextIndex], 1000);
    currentIndex = nextIndex;
    nextIndex += 1;
    if (nextIndex >= len) {
        nextIndex = 0;
    }
    for (let i = 0; i < len; i += 1) {
        paginations[i].className = "";
    }
    paginations[currentIndex].className = "active";
}
timer = setInterval(play, 3000);

$(".container").on(
    "mouseenter",
    function () {
        clearInterval(timer);
    },
    false
);

$(".container").on(
    "mouseleave",
    function () {
        timer = setInterval(play, 5000);
    },
    false
);

$(".prev").on(
    "click",
    function () {
        nextIndex = currentIndex - 1;
        if (nextIndex < 0) {
            nextIndex = len - 1;
        }

        play();
    },
    false
);

$(".next").on("click", play, false);

for (let i = 0; i < len; i++) {
    paginations[i].addEventListener(
        "mouseenter",
        function () {
            if (currentIndex === i) {
                return;
            }
            nextIndex = i;
            play();
        },
        false
    );
}
// =================轮播图结束==================




// ==================数据渲染====================

const getbanner = () => {
    jQuery.ajax({
      url: 'http://www.xiongmaoyouxuan.com/api/tab/1',
    //   url:url,
      type: 'get',
      data: {
        start:0
      },
      success(result){
        if(result.code == 200){
        result = result.data
        let storeData = result.items.list //显示主页
        // console.log(storeData)

        showlist(storeData)
        localStorage.setItem('LISTS',JSON.stringify(storeData))   
        }
      }
    })
 }

 const xxk = (url) => {
    jQuery.ajax({
     url:url,
      type: 'get',
      data: {
        start:20,
        sort:0
      },
      success(result){
          let response= result
        if(response.code == 200){
      let storeData = response.data.list

      showlist(storeData)
      showlists(storeData)
        // localStorage.setItem('LISTS',JSON.stringify(storeData))   
        }
      }
    })
 }


 getbanner()
//  onJiujiuBtn()


 const showbanner = banner => {
    data = {
      banner
    }
    // console.log(banner);
    let str = template('banner', data)
    $('.container').html(str)
 }

 //渲染列表
 const showlist = list => {
    data = {
      list:list.slice(0,16)
    }
    // console.log(list);
    let str = template('list', data)
    //   let asd =  $('.base-commodity-list').html(str)
   let asd= document.querySelector('.base-commodity-list')

    asd.innerHTML = str
}

// =======================渲染数据结束===========================


// ===============回到顶部==================
 /**
         * 回到顶部
         */
  function onBackTop() {
    var topDist = getScrollTop()
    var timer = setInterval(() => {
        topDist = topDist - 50
        setScrollTop(topDist)
        if (topDist <= 0) {
            clearInterval(timer)
        }
    }, 10);
}
/**
 * 兼容性写法
 * 设置页面向上滚动的距离
 */
function setScrollTop(dist) {
    if (document.body.scrollTop) {
        document.body.scrollTop = dist
    } else {
        document.documentElement.scrollTop = dist
    }
}
/**
 * 页面向上滚动的距离
 */
function getScrollTop() {
    if (document.body.scrollTop) {
        return document.body.scrollTop
    } else {
        return document.documentElement.scrollTop
    }
}
// ==============回到顶部结束===============


// ===================================

function getId(id){
localStorage.setItem('ID',id)
location.href = './pages/details.html'
}

// ===============
/**
 * 点击九块九的时候更新页面
 * @param {*}  
 */
// 2



// 第1个子页面
 const onJiujiuBtn =()=>{
    let jiujiuE = document.querySelector('.jiujiu')
    jiujiuE.addEventListener('click',function(){
      
        let onJiujiu = 'http://www.xiongmaoyouxuan.com/api/sub_column/7/items?start=0'
         location.href = './pages/Subpage.html'
         localStorage.setItem('dizhi',onJiujiu)
})
}
 onJiujiuBtn()


// 第2个子页面
function chaozhi(){
  let deq = document.querySelector('.czq') 
  deq.onclick = function(){
    let dequan = 'http://www.xiongmaoyouxuan.com/api/sub_column/174/items?start=0'
    location.href = './pages/Subpage.html'
    localStorage.setItem('dizhi',dequan)
} 
}
chaozhi()
// 第三个
function nvzhuang(){
    let deq = document.querySelector('.nvzhuang') 
    deq.onclick = function(){
      let xiajinz = 'http://www.xiongmaoyouxuan.com/api/column/3183/items?start=0'
      location.href = './pages/Subpage.html'
      localStorage.setItem('dizhi',xiajinz)
  } 
  }
  nvzhuang()

// 查看更多
function ck(){
  let cks = document.querySelector('.look-btn') 
  cks.onclick = function(){
    let ckgddz = 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=20&sort=0'
    xxk(ckgddz)
  }
}
ck()

const showlists = lists => {
   console.log(lists);
    data = {
      lists:lists.slice(0,16)
    }
    debugger
    // console.log(list);
    let str = template('lists', data)
 //  let asd= document.querySelector('.base-commodity-list')
$('.base-commodity-list').append($(str))
    
}

// 选项卡
function tab(){
let ulLi = document.querySelectorAll('.navbanner>li')
ulLi.forEach(item =>{
this.onclick = function(){
for(let i=0;i<ulLi.length;i++){
  ulLi[i].className = ''
}
this.className = 'active'
}
})
}
tab()